<!-- 核销记录 -->
<template>
	<view class="pages relative">
		<view class="msck" v-if="filterShow"></view>
		<!-- 顶部 -->
		<view class="pages-top bgc-w boxShadow">
			<p-select-client class="pt-30 pb-30"></p-select-client>
			<view class="pages-top-item row-box">
				<p-search style="height: 72rpx;flex: 1;" />
				<view class="fcc ml-20" @click="filterShow=!filterShow">
					<image src="/static/images/common/icon-1.png" mode="scaleToFill" class="filter-icon"></image>
					<text class="fc-3 fs-sm">筛选</text>
				</view>
			</view>
			<!-- 筛选框 -->
			<view class="filter-popup-box static bgc-w p-20" v-if="filterShow">
				<view class="filter-popup-item relative  mt-20">
					<view class="fc-3 fw-6 mb-10">
						按时间选择
					</view>
					<p-time-tab :list="timeList" :index='timeIndex' type='grid' bgcolor='#F4F4F4' />
				</view>
				<view class="filter-popup-item relative mt-20">
					<view class="fc-3 fw-6 mb-10">
						按订单类型选择
					</view>
					<p-time-tab :list="orderList" :index='orderIndex' bgcolor='#F4F4F4' mr='20rpx' />
				</view>
				<view class="row-box mt-20">
					<view class="btn-info fs " style="font-size: 28rpx;">
						清除
					</view>
					<view class="btn-ac fs" style="font-size: 28rpx;">
						确定
					</view>
				</view>
			</view>

		</view>

		<!-- 内容 -->
		<view class="pages-list-box relative" v-if="recordList&&recordList.length">
			<recordItem v-for="(item,index) in recordList" :key="index" @details='onDetails'></recordItem>
		</view>
		<view class="pages-list-box relative" v-else>
			<u-empty mode="data" icon="/static/images/common/no_data.png"></u-empty>
		</view>
		<!-- 技术支持 -->
		<p-support class=""></p-support>
	</view>
</template>

<script>
	import recordItem from './components/recordItem.vue'
	export default {
		components: {
			recordItem
		},
		data() {
			return {
				filterShow: false,
				timeIndex: 0,
				orderIndex: 0,
				recordList: [1, 1, 1, 1, 1, ],
			};
		},
		onLoad() {},
		methods: {
			onDetails(val) {
				console.log('去详情', val)
			}
		},
		computed: {
			timeList() {
				return [{
					title: '全部'
				}, {
					title: '今日'
				}, {
					title: '昨日'
				}, {
					title: '本周'
				}, {
					title: '本月'
				}, {
					title: '近半年'
				}, {
					title: '近一年'
				}, {
					title: '自定义'
				}, ]
			},
			orderList() {
				return [{
					title: '全部'
				}, {
					title: '到店使用'
				}, {
					title: '到店自提'
				}, ]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.static {
		position: static;
	}

	.pages-top {
		width: 750rpx;
		padding: 0 30rpx;
		position: sticky;
		top: 0;
		z-index: 3;

		.pages-top-item {
			height: 100rpx;
			margin: 0 auto;
		}
	}

	.filter-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.filter-popup-box {
		// position: relative;
		top: 200rpx;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.btn-info {
		width: 300rpx;
		line-height: 80rpx;
	}

	.btn-ac {
		width: 300rpx;
		line-height: 80rpx;
	}

	.msck {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.pages-list-box {
		z-index: 1;
	}
</style>